<template>
  <view class="input-box" :class="[styleColor?'styleinput': '']" @click="onClick">
    <view
      class="picker-box"
      :class="[disabled ? 'disabled' : '', align,styleColor? 'stylepicker' : '']"
      v-if="type == 'picker'"
    >
      <picker
        class="picker"
        :range="range"
        :mode="mode || 'selector'"
        :range-key="rangeKey || ''"
        :value="value"
        :data-value="value"
        :disabled="disabled"
        @change="onChange"
        @cancel="onCancel"
        @columnchange="onColumnchange"
      >
        <view class="input">
          <view class="text" :style="computedPlace ? placeholderStyle : ''">{{
            getPickerText
          }}</view>
          <image class="icon-right" :src="iconRight" v-if="iconRight" />
        </view>
      </picker>
    </view>
    <block v-else>
      <view class="prefix" slot="prefix"> </view>
      <input
        class="input"
        v-model="_val"
        :data-focus="autoFocus ? 1 : 0"
        :type="_type"
        :maxlength="max"
        :max="max"
        :data-max="max"
        :class="[_type]"
        :placeholder="placeholder"
        :auto-focus="!!autoFocus"
        :focus="!!autoFocus"
        :placeholder-style="computedPlaceholderStyle"
        :readonly="disabled"
        :disabled="disabled"
        @confirm="onConfirm"
        @focus="onFocus"
        @blur="onBlur"
        @input="onInput"
        @change="onChange"
      />
      <view class="ft">
        <image
          :src="imgBaseUrlV1 + (!showPassword ? 'eye.png' : 'eye_h.png')"
          mode="widthFix"
          class="eye"
          v-if="type == 'password'"
          @click="onEye"
        />
        <image
          :src="imgBaseUrlV1 + 'delete.png'"
          mode="widthFix"
          v-if="clear && val && focus"
          class="delete"
          @click="onDelete"
        />
        <slot name="ft"></slot>
      </view>
    </block>
  </view>
</template>

<script>
import { imgBaseUrlV1, imgBaseUrlV2 } from "@/common/config";

export default {
  props: {
	styleColor:{
		type: Boolean,
		default(){
		  return false
		}
	},
    item: {
      default() {
        return {};
      },
    },
    type: {
      default: "text",
    },
    align: {
      default: "left",
    },
    mode: {
      default: "",
    },
    pickerIcon: {
      default: imgBaseUrlV2 + "arrow_down.png",
    },
    range: {
      type: Array,
      default() {
        return [];
      },
    },
    rangeKey: {
      default: "",
    },
    value: {
      default: "",
    },
    val: {
      default: "",
    },
    disabled: {
      default: false,
    },
    max: {
      type: Number,
      default: 500,
    },
    clear: {
      default: true,
    },
    placeholder: {
      default: "请输入",
    },
    placeholderStyle: {
      default() {
        return "color: #999";
      },
    },
    autoFocus: {
      default: false,
    },
    iconRight: {
      default: imgBaseUrlV2 + "arrow_down.png",
    },
  },
  computed: {
    computedPlaceholderStyle() {
      return `color: #999;font-family: PingFang SC;` + this.placeholderStyle;
    },
    computedPlace() {
      let type = this.type;
      let mode = this.mode;
      let value = this.value;
      let val = this.val;
      if (
        (type == "picker" || type == "select") &&
        mode != "date" &&
        mode != "time"
      ) {
        return !val;
      }
      return typeof value !== "number" ? value : typeof value !== "undefined";
    },
    getPickerText() {
      let value = this.value;
      let val = this.val;
      let name = this.name;
      let mode = this.mode;
      let v = val || this.value || name || this.placeholder;
      if ((mode == "date" || mode == "time") && value) {
        v = this.value;
      }
      return v;
    },
    computedStyle() {
      if (!this.adjustPosition) {
        return "";
      }
      return this.customStyle;
    },
  },
  data() {
    return {
      _type: "",
      _val: "",
      focus: false,
      imgBaseUrlV1,
      showPassword: false,
    };
  },
  methods: {
    onConfirm(e) {
      this.$emit("confirm", e);
    },
    onEye() {
      this._type = this._type == "password" ? "text" : "password";
      this.showPassword = !this.showPassword;
    },
    onFocus(e) {
      this.focus = true;
      this.$emit("focus", e);
    },
    onBlur(e) {
      setTimeout(() => {
        this.focus = false;
      }, 30);
      this.$emit("blur", e);
    },
    onInput(e) {
      let v = e.data || e.detail.value;
      this.$nextTick(() => {
        this.$emit("input", this._val);
        this.$emit("change", this._val);
      });
    },
    onClick() {
      if (typeof uni[this.type] === "function") {
        let event = (e) => this.$emit(this.type, e);
        uni[this.type]({
          success: event,
          fail: event,
        });
      }
    },
    onChange(e) {
      if (e.detail) {
        this.$emit("change", e.detail.value);
      }
    },
    onCancel() {},
    onColumnchange(e) {
      console.log(e, "?col");
    },
    onDelete() {
      this._val = "";
      this.$emit("input", "");
      this.$emit("change", "");
      this.$emit("delete", "");
    },
  },
  created() {
    this._val = this.value || this.val;
    this._type = this.type;
  },
  watch: {
    value(n) {
      if (n !== this._val) {
        this._val = this.value || this.val;
      }
    },
  },
};
</script>

<style lang="stylus" scoped>
@import '~@/common/stylus/mixins';

.input-box {
  position: relative;
  display: flex;
  flex: 1;
  width: 100%;
  height: 90rpx;
  border-radius: 5rpx;
  background: #1B345F;
  font-size: 32rpx;
  >.input {
    display: block;
    width: 100%;
    flex: 1;
    height: 90rpx;
    padding: 8rpx 16rpx;
    box-sizing: border-box;
    border: none;
    background: #1B345F;
    border: none;
    outline: none;
    font-size: 32rpx;
    text-align: left;
	color:#fff;
    &.textarea {
      height: auto;
      padding: 20rpx 8rpx;
    }
  }

  >.ft {
    // position: absolute;
    position: relative;
    display: flex;
    z-index: 3;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    padding-right: 16rpx;
    align-items: center;
    margin: auto;

    >.eye {
      width: 32rpx;
      height: 32rpx;
      extend-click();
      margin: 0 16rpx;
    }

    >.delete {
      width: 32rpx;
      height: 32rpx;
      extend-click();
      margin: 0 16rpx;
    }
  }
}

.styleinput {
	background:#fff!important;
	border:1rpx solid#999;
	border-radius: 5rpx;
	>.input {
		background: none !important;
		color: #555;
	}
}

.stylepicker {
	background:#fff!important;
	// border:1rpx solid#999
	.input {
		>.text{
			color:#555;
		}
	}
	
}


.picker-box {
  display: flex;
  flex: 1;
  justify-content: flex-end;
  font-size: 32rpx;

  &.disabled {
    color: #999;
  }

  >.picker {
    flex: 1;
    height: 100%;
  }

  &.left {
    .text {
      text-align: left;
    }
  }

  .input {
    display: flex;
    padding: 0 20rpx;
    line-height: 90rpx;
    align-items: center;

    >.text {
      flex: 1;
    }

    .icon-right {
      display: block;
      width: 38rpx;
      height: 38rpx;
    }
  }
}

.picker-icon {
  flex: 0 0 32rpx;
  width: 32rpx;
  height: 32rpx;
  margin-right: 14rpx;
}
</style>